HTML의 사양이나 서식, 구조 등의 기초적인 것을 알고 싶다.
URL이나 경로 등의 기초 지식을 알고 싶다.
“HTML이란 웹 페이지를 만들기 위한 프로그래밍 언어 중에서 ‘마크업 언어 (Markup Language)’ 라는 것의 일종입니다. 페이지에 포함되는 텍스트나 그림 등의 ‘콘텐츠’에 태그를 붙여서 그 ‘의미’를 정의 내려 주는 것이 HTML의 역할입니다.
HTML의 버전
HTML 표준은 웹 기술의 표준화를 정하는 단체인 W3C가 정의합니다. HTML의 최신 버전은 2017년 10월에 recommendation 1이 된 'HTML 5.1'입니다. 이 버전은 누구나 열람할 수 있도록 인터넷에 공개되어 있습니다.
HTML 5.1: [URL] https://www.w3.org/TR/html51/
브라우저의 공개 표준: Chrome, Firefox, Edge/Internet Exlorer (IE) Safari 스마트 폰이나태블릿 PC 표준: Android의 Chrome, iOS의 Safari
HTML 태그 형식
HTML의 기본적인 형식은 다음과 같습니다.
태그 = 시작태그( < a href="news.html"> ) + 종료태그 ( </a>)
< a href="news.html"> 새로운 정보를 공개합니다 </a>
요소 = 태그 이름<a) + 속성href +속성 값"news.html" +(새로운 정보를 공개합니다)+/a>
- HTML 기본적인 형식: 태그는 시작 태그와 종료 태그로 콘텐츠를 둘러싸고있다.
- 태그로 둘러 싸는 것은 콘텐츠에 의미를 부여하고 있다.
-'새로운 정보를 공개합니다'라는 텍스트(콘텐츠)에 '링크'라는 의미(역할 설정'을 부여한다.
태그: 시작 태그와 종료 태그로 분류합니다.
태그 이름: 태그의 의미를 결정
속성 & 속성값: - 태그에서 추가적인 정보를 사용할 때는 시작태그에 '속성'을 포함
-대부분의 속성에는 '속성 값'이 필요하다. 예를 들어 <a 태그에는 href 속성값을
추가 하며 이 속성값은 링크할 URL 을 지정
속성과 속성 사이는 공백으로 구분한다
<a href = "news.html" class="link important">
속성값은 큰따옴표로 둘러싼다. 여러값을 지정할 때는 공백으로 구분한다
속성의 종류: 고유속성 :특정 태그에서 반드시 사용해야 하는 속성.('href는 <a 태그에 추가 가능)
글로벌 속성: 특정태그에 추가. id 속성과 class 속성
부울 속성: 속성값을 설정할 필요가 없는 속성 (Form 태그에서 많이 사용)
콘텐츠: 시작 태그와 종료 태그에 둘러싸여 있는 부분이며 브라우저에 이 콘텐츠만 표시된다.
요소: 태그와 콘텐츠를 모두 요소라고한다.
빈요소
대부분의 태그는 시작 태그와 종료 태그가 있습니다. 그러나 몇몇 태그에는 종료 태그가 없고 또 콘텐츠를 둘러싸지 않은 경우가 있습니다. 이러한 태그를 '빈요소'라고 합니다.
많이 사용되는 빈요소
| 태그 | 설명 |
|---|---|
| <img> | 그림을 삽입한다 |
| <input> | 폼을 표시한다 |
| <br> | 줄바꿈을 한다 |
| <hr> | 단락선을 그린다 |
| <meta> | 여러가지 메타 태그를 추가한다 |
| <link> | CSS파일과 같은 관련 파일을 링크한다 |
HTML의 구조
HTML 태그의 콘텐츠에는 다른 태그를 포함할 수 있으므로 요소 (태그와 콘텐츠)와 요소 사이에는 계층 관계가 있습니다. 이 계층 구조를 '트리 구조'라고 합니다. HTML 문서는 모두 트리 구조로 되어있습니다.
<html>
부모요소, 자식요소
어떤 요소에서 바로 위 계층에 있는 요소를 '부모 요소', 반대로 바로 아래 계층의 요소를 '자식 요소'라고 합니다. CSS의 '자식 셀렉터'와 '자손 셀렉터'는 이 '부모 요소'와 '자식 요소'의 관계를 이용합니다.
부모 요소 <div>
자식 요소 <h1>카메라의 성능을 최대로 높인 신 모델</h1>
<div>
조상 요소와 자손 요소
어떤 요소에서 보았을 때 '부모 요소의 부모 요소'와 '부모 요소의 부모 요소의 부모 요소' 등이 있는데 이를 모두 '조상 요소'라고 합니다. 마찬가지로 '자식 요소의 자식 요소'를 '자손 요소'라고 합니다.
CSS의 자손 셀렉터는 이 조상 요소와 자손 요소의 관계를 이용합니다.
형제 요소
어떤 요소와 같은 계층에 있는 요소를 '형제 요소'라고 합니다. 그 요소 보다 먼저 나온 요소를 '형 요소', 나중에 나온 요소를 '동생 요소'라고 합니다. 또 형제 요소 중에서도 특히, '바로 다음 동생 요소' 또는 '바로 앞의 형 요소'를 '인접 요소'라고 합니다.
URL
URL은 인터넷에 공개되어 있는 파일을 지정한 '주소'입니다. 특정한 URL과 관련된 파일은 세상에 하나밖에 없으므로 HTML 파일이나 그림 파일에서 올바른 URL을 알면 반드시 원하는 파일을 확인활 수 있습니다. URL은 여러 파트로 구분할 수 있습니다.
https://blog.naver.com/itkyohak/22222
프로토콜(https://) 도메인 이름(blog.naver.com) 경로(itkyohak/22222)
H절대 경로와 상대 경로
절대경로
상대경로
루트상대경로
링크의 기점 (출발 위치) |
링크처 (도착 위치) |
루트 상대 경로 |
상대 경로 |
|---|---|---|---|
/index.html |
/about/access.html |
/about/access.html |
about/access.html |
/Contact/index.html |
/images/logo.png |
/images/logo.png |
../images/logo.png |
용어 설명
- 루트 상대 경로:
/로 시작하며, 사이트의 최상위(root) 디렉터리를 기준으로 경로를 지정합니다. - 상대 경로: 현재 파일의 위치를 기준으로
../(상위 폴더),./(현재 폴더) 등을 사용해 경로를 지정합니다.
“웹 사이트에는 크게 '정적 사이트'와 '동적 사이트의 두 종류가 있습니다.정적 페이지는 공개된 페이지의 HTML 파일로 만드는 방법입니다. 그래서 정적 사이트의 경우는 페이지 수만큼의 HTML 파일을 작성하게 됩니다. 페이지 수가 1쪽밖에 없는 광고용 웹 사이트에서는 많을 경우 50쪽 정도 분량의 웹사이트에서는 정적인 웹 사이트로 작성하는 경우가 많습니다.
한편 동적 사이트는 웹 서버에 전용 프로그램을 설치하고, HTML을 사용하지 않고 페이지를 추 가하거나 업데이트할 수 있도록 만든 웹 사이트를 말합니다. 동적 사이트의 각 페이지는 HTML 파일로 만들어진 것이 아니라 '템플릿과 콘텐츠를 프로그램이 합성하고 작성합니다. 비교적 규 모가 크거나 업데이트를 자주하는 경우 프로그램을 도입하고 동적 사이트를 만드는 경우가 많습 니다. 동적 웹 사이트의 구축에 많이 사용되는 소프트웨어를 'CMS'라고 하며, 대표적인 것에는 WordPress가 있습니다. 동적 사이트를 구축하는 경우는 웨 디자이너나 마크업 엔지니어는 페 이지의 '템플릿'을 개발합니다. ”
– 정적사이트와 동적사이트
![[독후감] AGI, 천사인가 악마인가: 인류에게 주어진 마지막 골든 아워에 대한 성찰](https://blogger.googleusercontent.com/img/a/AVvXsEi2kTs1mAJ7TA6CXouzyvcZzkba7__Rf4PwZVQbDFELV-LKRDcEHHqO_SJ3IBA8Tcxu9PbPvNxXG2Cpzlg7iIKYwaMmLlDIJxZZkDQnLSoRpuIBk_ESHNam6b32slcjKE_5z_D6lndM8FgkoTsAmxmRz2EHPWocVwqMAKQe2t74OHLnQepFueBEjPrsHF9d=w72-h72-p-k-no-nu)
0 댓글